<script setup lang="ts">
import { ReNormalCountTo } from "@/components/ReCountTo";
import "plus-pro-components/es/components/search/style/css";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import { ref } from "vue";

defineOptions({
  name: "SalesSituationCenter"
});
const form = ref({
  status: "0",
  time: new Date().toString()
});
const searchColumns: PlusColumn[] = [
  {
    label: "营运据点",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "华普永明",
        value: "0",
        color: "red"
      },
      {
        label: "照明电器",
        value: "1",
        color: "blue"
      },
      {
        label: "智慧光电",
        value: "2",
        color: "yellow"
      },
      {
        label: "浙江科技",
        value: "3",
        color: "red"
      }
    ]
  },
  {
    label: "产品分类",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "整灯",
        value: "0",
        color: "red"
      },
      {
        label: "电源",
        value: "1",
        color: "blue"
      },
      {
        label: "模组",
        value: "2",
        color: "yellow"
      },
      {
        label: "灯壳",
        value: "3",
        color: "red"
      }
    ]
  },
  {
    label: "开始时间",
    prop: "startTime",
    valueType: "date-picker",
    fieldProps: {
      type: "date",
      placeholder: "请选择开始时间"
    }
  },
  {
    label: "结束时间",
    prop: "endTime",
    valueType: "date-picker",
    fieldProps: {
      type: "date",
      placeholder: "请选择结束时间"
    }
  },
  {
    label: "客户",
    prop: "name",
    fieldProps: {
      placeholder: "请输入客户名称"
    }
  },
  {
    label: "业务员",
    prop: "name",
    fieldProps: {
      placeholder: "请输入业务员姓名"
    }
  },
  {
    label: "内部交易",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "是",
        value: "0",
        color: "red"
      },
      {
        label: "否",
        value: "1",
        color: "blue"
      }
    ]
  }
];
const data = ref([
  {
    name: "张三",
    value: 10,
    xAxis: 10
  },
  {
    name: "里斯",
    value: 20,
    xAxis: 20
  },
  {
    name: "张三",
    value: 10,
    xAxis: 10
  },
  {
    name: "里斯",
    value: 20,
    xAxis: 20
  },
  {
    name: "张三",
    value: 10,
    xAxis: 10
  },
  {
    name: "里斯",
    value: 20,
    xAxis: 20
  }
]);
const handleChange = () => {};
const handleSearch = () => {};
const handleRest = () => {};
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch
        v-model="form"
        searchText="搜索"
        resetText="重置"
        expand-text="展开"
        retractText="收起"
        :columns="searchColumns"
        :show-number="2"
        label-width="80"
        label-position="right"
        @change="handleChange"
        @search="handleSearch"
        @reset="handleRest"
      />
    </el-card>

    <el-row :gutter="24" justify="space-around">
      <el-card class="line-card" shadow="never">
        <div class="flex justify-between">
          <span class="text-md font-medium"> 订单金额 </span>
          <div class="w-8 h-8 flex justify-center items-center rounded-md">
            <IconifyIconOffline width="18" height="18" />
          </div>
        </div>

        <ReNormalCountTo
          :duration="1000"
          :fontSize="'1.6em'"
          :startVal="1"
          :endVal="100000000"
        />
        <p class="font-medium text-green-500">
          <span>同期 100000</span> <span class="text-red-500">同比 -10%</span>
        </p>
      </el-card>
      <el-card>出货净额</el-card>
      <el-card>回款金额</el-card>
      <el-card>毛利率</el-card>
      <el-card>订单准交率</el-card>
      <el-card>成品存货周转天数</el-card>
    </el-row>
    <el-row>
      <el-card class="w-full">
        <EChartsComponent :data="data" type="bar" />
      </el-card>
    </el-row>
  </div>
</template>

<style scoped lang="css">
.table-card {
  margin-top: 20px;
}

.operate {
  margin-bottom: 20px;
}
</style>
